﻿
import QtQuick 2.0


Rectangle{
    width: 320;
    height: 240;
    color: "gray"


    Text{
        id:textShow;
        anchors.horizontalCenter: parent.horizontalCenter;
        anchors.top: parent.top;
        anchors.topMargin: 4;
        text:"hello";
        color:"red";
        font.pixelSize: 32;
    }

    Component{
        id: colorComponent;
        Rectangle{
            id:colorPicker;
            width: 50;
            height: 30;
            signal colorPicked(color clr);
            MouseArea{
                anchors.fill: parent;
                onPressed: {
                    colorPicker.colorPicked(colorPicker.color);
                }
            }
        }
    }

        Loader{
            id: greenLoader;
            width: 80;
            height: 60;
            anchors.left: parent.left;
            anchors.leftMargin: 4;
            anchors.bottom: parent.bottom;
            anchors.bottomMargin: 4;
            sourceComponent: colorComponent;
            onLoaded:{
                item.color = "green";
            }
        }

        Loader{
            id: blueLoader;
            anchors.left: greenLoader.right;
            anchors.leftMargin: 4;
            anchors.bottom: greenLoader.bottom;
            sourceComponent: colorComponent;
            onLoaded: {
                item.color = "blue";
            }
        }
        Connections{
            target: greenLoader.item;
            onColorPicked:{
                textShow.color = clr;
            }
        }

        Connections{
            target: blueLoader.item;
            onColorPicked:{
                textShow.color = clr;
            }
        }


}

